<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单元素 form
     action 表示表单提交的服务器地址 -->
     <form action="test.php" method="get">
        <!-- 1.，明文输入框
         readonly 只读 -->
         用户:<input type="text" readonly>
         <!-- 2 暗文输入框 -->
          <!-- br 强制换行显示 -->
          密码:<input type="password"><br>
          <!-- 单选按钮
           设置互斥效果，加入同一个选项组 
           Label 点击文字是让表单元素聚焦-->
           性别：
           <label>
         男：<input name="gender" value="male" type="radio">
           </label>
           <!-- checked设置默认选中 -->
        女: <input checked name="gender" value="female" type="radio"><br>
           <!-- 复选框 -->
            爱好:
          篮球： <input type="checkbox" name="hobbies" value="basketball" >
            足球：<input checked type="checkbox" name="hobbies" value="football" >
           游泳：<input type="checkbox" name="hobbies" value="swimming" ><br>
           <!-- 分割线 -->
            <hr>
            <!-- 下拉框 -->
             <select name="city">
                <optgroup label="一线城市">
                <option value="suzhou">苏州</option>
                <!-- selected设置默认选中 -->
                <option selected value="changzhou">常州</option>
                <option value="wuxi">无锡</option>
                </optgroup>
                <!-- disable 表示禁用 -->
                <optgroup label="十八线城市">
                <option disabled value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangdong">广东</option>
                </optgroup>
             </select>
             <!-- 多行文本框 -->
              <textarea></textarea>
              <!-- 进度条 -->
               <progress value="70" max="100"></progress>
               <!-- 滑块 -->
                <input type="range" min="0" max="10" step="1">
                <!-- 日期选择器 -->
                 <input type="date">
            <!-- 时间日期选择器 -->
             <input type="datetime-local">
             <!-- 颜色拾取器 -->
              <input type="color">
              <!-- 提交按钮 -->
              <input type="submit" value="提交">
              <!-- 普通按钮 -->
               <input type="button" value="普通按钮">
        </form>
</body>
</html>